<template>
  <div class="desc-main">
    <el-table
      :data="taskList"
      :stripe="true"
      element-loading-text="Loading"
      :border="false"
      :header-cell-style="{color:'black'}"
      fit
      highlight-current-row
    >
      <!-- <el-table-column type="expand">
        <template v-slot="props"> -->
          <!-- 任务的详情信息 -->
          <!-- <el-descriptions :column="3" border>
            <el-descriptions-item>
              <template slot="label">
                {{ 'id' }}
              </template>
              <el-row>
                {{ props.row.id }}
              </el-row>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                {{ $t('content') }}
              </template>
              <el-row>
                {{ props.row.task }}
              </el-row>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                {{ $t('dep') }}
              </template>
              <el-row>
                {{ depTasks(props.row.dep) }}
              </el-row>
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions :column="1" border>
            <el-descriptions-item v-for="(item, key) in props.row.args" :key="key">
              <template slot="label">
                {{ $t('arg') }}{{ key+1 }}
              </template>
              <el-descriptions :column="2" border>
                <el-descriptions-item>
                  <template slot="label">
                    {{ $t('name') }}
                  </template>
                  <el-row>
                    {{ item.name }}
                  </el-row>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    {{ $t('type') }}
                  </template>
                  <el-tag size="small">
                    {{ item.value }}
                  </el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">
                    {{ $t('description') }}
                  </template>
                  <el-row>
                    {{ item.description }}
                  </el-row>
                </el-descriptions-item>
              </el-descriptions>
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-table-column> -->
      <el-table-column
        :label="$t('number')"
        align="center"
        min-width="8.3%"
      >
        <template v-slot="scope">
          {{ scope.$index+1 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="task"
        :label="$t('sub')+$t('task')"
        align="left"
      />
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    // eslint-disable-next-line vue/require-default-prop
    taskList: {
      type: Array,
      require: true
    }
  },
  data() {
    return {
      appIntro: ''
    }
  },
  methods: {
    // 返回dep数组的语言描述
    depTasks(depList) {
      let RetVal = ''
      if (depList.length > 0) {
        RetVal = 'Task' + depList[0]
        for (let i = 1; i < depList.length; i++) {
          RetVal += ', Task' + depList[i]
        }
      } else {
        RetVal = this.$t('NULL')
      }
      return RetVal
    }
  }
}
</script>

<style scoped>
.desc-main{
  width: 100%;
}
</style>
